<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="calendar">
        <title>Overview | Kendo UI Calendar</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to initialize the Kendo UI Calendar widget, configure its options, and make use of custom templates.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/scheduling/calendar/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/scheduling/calendar/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="calendar-overview"><a href="#calendar-overview">Calendar Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/calendar/index">Kendo UI Calendar widget</a> renders a graphical calendar that provides navigation and selection functionalities.</p>

<p>It also supports custom templates for its <code>month</code> view and configuration options for minimum and maximum dates, a start view, and the depth of the navigation.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<h3 id="initialize-the-calendar"><a href="#initialize-the-calendar">Initialize the Calendar</a></h3>

<p>To initialize the Calendar, use a jQuery selector.</p>

<h6>Example</h6>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;

&lt;script&gt;
    $(document).ready(function(){
        $("#calendar").kendoCalendar();
    });
&lt;/script&gt;
</code></pre>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<p>The Calendar provides configuration options that can be set during initialization. The available properties are:</p>

<ul>
<li>Selected date</li>
<li>Minimum and/or maximum date</li>
<li>Start view</li>
<li>Week numbers</li>
<li>Selection</li>
<li>Navigation depth—that is, the option to define the last view to which the user can navigate.</li>
<li>Day template</li>
<li>Footer template</li>
</ul>

<p>The first day of the week depends on the applied <a href="/framework/globalization/definecultureinfo">culture</a>.</p>

<h3 id="configuration-Selected,"><a href="#configuration-Selected,">Selected, Minimum, and Maximum Dates</a></h3>

<p>The following example demonstrates how to create a Calendar with a selected date and a defined minimum and maximum dates.</p>

<h6>Example</h6>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;

&lt;script&gt;
    $("#calendar").kendoCalendar({
        value: new Date(),
        min: new Date(1950, 0, 1),
        max: new Date(2049, 11, 31)
    });
&lt;/script&gt;
</code></pre>

<p>As a result, the Calendar does not navigate to a date that is earlier than the specified minimum date and also restricts the navigation to the maximum date you specified.</p>

<h3 id="configuration-Start"><a href="#configuration-Start">Start View and Navigation Depth</a></h3>

<p>To define the first rendered view, use the <code>start</code> option. To control the navigation depth, set the <code>depth</code> option.</p>

<p>The following views are predefined:</p>

<ul>
<li>
<code>month</code>—Shows the days of the month.</li>
<li>
<code>year</code>—Shows the months of the year.</li>
<li>
<code>decade</code>—Shows the years of the decade.</li>
<li>
<code>century</code>—Shows the decades of the century.</li>
</ul>

<h3 id="configuration-Selectable"><a href="#configuration-Selectable">Selectable Month Calendars</a></h3>

<p>The following example demonstrates how to create a Calendar that allows users to select a month.</p>

<h6>Example</h6>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;

&lt;script&gt;
    $("#calendar").kendoCalendar({
        start: "year",
        depth: "year"
    });
&lt;/script&gt;
</code></pre>

<h2 id="day-templates"><a href="#day-templates">Day Templates</a></h2>

<p>The Calendar enables you to customize the rendered day for the <code>month</code> view.</p>

<p>The following example demonstrates how to create a Calendar by using a custom template.</p>

<h6>Example</h6>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;

&lt;script&gt;
    $("#calendar").kendoCalendar({
        month: {
            content: '&lt;div class="custom"&gt;&lt;#=data.value#&gt;&lt;/div&gt;'
        }
    });
&lt;/script&gt;
</code></pre>

<p>The template wraps the <code>value</code> in a <code>&lt;div&gt;</code> HTML element. The structure of the data object that is passed to the template function:</p>

<pre><code>data = {
    date: date, // Date object corresponding to the current cell
    title: kendo.toString(date, "D"),
    value: date.getDate(),
    dateString: "2011/0/1" // formatted date using yyyy/MM/dd format and month is zero-based
};
</code></pre>

<h2 id="week-numbers"><a href="#week-numbers">Week Numbers</a></h2>

<p>You can configure the Calendar to display the week number and also use the week number template to customize the cells in the <strong>Week</strong> column.</p>

<h3 id="rendering-of-week-numbers"><a href="#rendering-of-week-numbers">Rendering of Week Numbers</a></h3>

<p>The <a href="/api/javascript/ui/calendar#configuration-weekNumber"><code>weekNumber</code></a> option enables the Calendar to display the week number on an annual base to the left side of month view and as a separate column.</p>

<h6>Example</h6>

<pre data-lang="html"><code>   &lt;div id="calendar"&gt;&lt;/div&gt;
   &lt;script&gt;
    $("#calendar").kendoCalendar({
        weekNumber: true
    });
  &lt;/script&gt;
</code></pre>

<h3 id="customizing-week-column-cells"><a href="#customizing-week-column-cells">Customizing Week Column Cells</a></h3>

<p>The week-number template intends to customize the cells in the <strong>Week</strong> column. By default, the widget renders the calculated week of the year.</p>

<p>The available properties in the <code>data</code> object are:</p>

<ul>
<li>
<code>currentDate</code>—Returns the first date of the current week.</li>
<li>
<code>weekNumber</code>—The calculated week number.</li>
</ul>

<p>You can use these properties in the template to make additional calculations.  </p>

<h6>Example</h6>

<pre><code>&lt;style&gt;
  .italic{
    font-style: italic;
  }
&lt;/style&gt;
&lt;body&gt;

&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script id="week-template" type="text/x-kendo-template"&gt;
   &lt;a class="italic"&gt;#= data.weekNumber #&lt;/a&gt;
&lt;/script&gt;
&lt;script&gt;
  $("#calendar").kendoCalendar({
    weekNumber: true,
    month: {
      weekNumber: $("#week-template").html()
    }
  });
&lt;/script&gt;
</code></pre>

<h2 id="selection"><a href="#selection">Selection</a></h2>

<p>The Calendar enables the user to make a single, multiple, and range date selections, as well as week selections. For a runnable example on multiple selection, refer to <a href="http://demos.telerik.com/kendo-ui/calendar/selection">this demo</a>.</p>

<h3 id="single-date-selection"><a href="#single-date-selection">Single Date Selection</a></h3>

<p>By default, the user can select a single date from the Calendar by using the mouse or the keyboard and you do not need to make additional configuration to enable the single date selection.</p>

<h3 id="multiple-date-selection"><a href="#multiple-date-selection">Multiple Date Selection</a></h3>

<p>As of the Kendo UI 2017 R3 release, the Calendar allows you to implement the multiple date selection by using the <a href="/api/javascript/ui/calendar#configuration-selectable"><code>selectable</code></a> configuration property.</p>

<h6>Example</h6>

<pre data-lang="html"><code>   &lt;div id="calendar"&gt;&lt;/div&gt;
   &lt;script&gt;
    $("#calendar").kendoCalendar({
        selectable: "multiple"
    });
  &lt;/script&gt;
</code></pre>

<p>To perform the multiple date selection, the user can also use the keyboard:</p>

<ul>
<li>
<code>Ctrl</code> + mouse click on specific date marks the date as selected and other previously selected dates remain selected as well.</li>
<li>The selection of a date from a specific view without utilizing the <code>Ctrl</code> key, deselects all previously selected dates—including the previously selected dates from other views or months, and selects the date of the clicked cell.</li>
<li>The selection of a date that is already selected while holding the <code>Ctrl</code> key removes the date from the selection.</li>
</ul>

<p><strong>Figure 1: Calendar with multiple date selection</strong></p>

<p><img src="/controls/scheduling/calendar/calendar1_1.png" alt="Calendar with multiple dates selected"></p>

<h3 id="range-date-selection"><a href="#range-date-selection">Range Date Selection</a></h3>

<p>The Calendar enables the range date selection over the keyboard. The usage of the <code>Shift</code> key allows the user to select a range of dates in the same month or across different months:</p>

<ul>
<li>To select all dates between the most recently selected one (with <code>Space</code> or mouse click) and the clicked cell, press <code>Shift</code> and click with the mouse.</li>
<li>If no previous selection was made, <code>Shift</code> and a mouse click select all dates from the beginning to the clicked cell.</li>
</ul>

<p><strong>Figure 2: Calendar with range selection</strong></p>

<p><img src="/controls/scheduling/calendar/calendar1_2.png" alt="Calendar with range selection"></p>

<h3 id="week-selection"><a href="#week-selection">Week Selection</a></h3>

<p>When the user clicks on a specific week number, the Calendar selects the entire week. The week selection functionality is a special case of range selection which starts from the first day of the week and selects all dates to the end of the week.</p>

<p><strong>Figure 3: Calendar with week selection</strong></p>

<p><img src="/controls/scheduling/calendar/calendar1_3.png" alt="Calendar with week selection"></p>

<h2 id="keyboard-navigation"><a href="#keyboard-navigation">Keyboard Navigation</a></h2>

<p>The keyboard navigation of the Calendar works by listening to the key-down events on the wrapper element of the widget. The logic assumes that everything the user does is in accordance with the currently focused date cell and not the focused element of the browser.</p>

<p>Depending on selection type (single or multiple), the Calendar behaves differently in terms of selecting and navigating with the keyboard. When the user applies the multiple date selection, the Calendar demonstrates the following keyboard navigation behavior:</p>

<ul>
<li>The focusing or selection of a date from another month does not navigate to the corresponding month. The user is able to continue the selection of dates from the current view.</li>
<li>The pressing of <code>Space</code> or <code>Enter</code> on a specific date makes a single selection by deselecting all other selected dates.</li>
<li>The pressing of <code>Space</code> or <code>Enter</code> on a specific date while the user is holding the <code>Ctrl</code> key adds the date to the current selection. If the date is already selected, it is removed from the selection.</li>
<li>The pressing of <code>Shift</code> + <code>Enter</code> or <code>Space</code> performs a range selection. It selects all dates between the most recently selected date (with <code>Space</code> or <code>Enter</code> or a mouse click) and the date that holds the focused cell.</li>
<li>The pressing of <code>Shift</code> + <code>Up Arrow</code> or <code>Down Arrow</code> extends the selection up or down one row in the month view respectively.</li>
<li>The pressing of <code>Shift</code> + <code>Right Arrow</code> or <code>Left Arrow</code> adds the next or previous date to the current selection respectively.</li>
</ul>

<p>For a runnable example on performing date selection over the keyboard, refer to <a href="http://demos.telerik.com/kendo-ui/calendar/keyboard-navigation">this demo</a>.</p>

<h2 id="disabling-dates"><a href="#disabling-dates">Disabling Dates</a></h2>

<p>The Calendar allows you to disable certain days which are not intended to be selected by the end user such as weekends, national holidays, and others.</p>

<p>To disable a date, either:</p>

<ul>
<li>Set an array, or</li>
<li>Add a function.</li>
</ul>

<h3 id="set-an-array"><a href="#set-an-array">Set an Array</a></h3>

<p>When you set an array, list the days that need to be disabled by using the first letters from their names in English.</p>

<h6>Example</h6>

<pre data-lang="html"><code>   &lt;div id="calendar"&gt;&lt;/div&gt;
   &lt;script&gt;
    $("#calendar").kendoCalendar({
        value: new Date(),
        disableDates: ["we", "th"],
    });
  &lt;/script&gt;
</code></pre>

<h3 id="add-a-function"><a href="#add-a-function">Add a Function</a></h3>

<p>When you add a function, determine its return value as <code>true</code> for the date that is disabled.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="calendar"&gt;&lt;/div&gt;
    &lt;script&gt;
    $("#calendar").kendoCalendar({
        disableDates: function (date) {
            var disabled = [13,14,20,21];
            if (date &amp;&amp; disabled.indexOf(date.getDate()) &gt; -1 ) {
                return true;
            } else {
                return false;
            }
        }
    });
    &lt;/script&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI Calendar:</p>

<ul>
<li><a href="/controls/scheduling/calendar/how-to/control-header-format-based-on-selected-culture">How to Control the Header Format</a></li>
<li><a href="/aspnet-mvc/helpers/calendar/overview">Overview of the ASP.NET MVC HtmlHelper Extension for the Calendar Widget</a></li>
<li><a href="/jsp/tags/calendar/overview">Overview of the Calendar JSP Tag</a></li>
<li><a href="/php/widgets/calendar/overview">Overview of the Calendar PHP Class</a></li>
<li><a href="/api/javascript/ui/calendar">Calendar JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI DatePicker:</p>

<ul>
<li><a href="/controls/editors/datepicker/overview">Overview of the DatePicker Widget</a></li>
<li><a href="/controls/editors/datepicker/how-to/AngularJS/set-first-day-of-week">How to Set the First Weekday</a></li>
<li><a href="/controls/editors/datepicker/how-to/date-masking-using-maskedtextbox">How to Create Date Masking</a></li>
<li><a href="/controls/editors/datepicker/how-to/persist-entered-date">How to Persist Entered Dates</a></li>
<li><a href="/controls/editors/datepicker/how-to/resize-calendar-based-on-input-width">How to Resize Calendar Based on Input Width</a></li>
<li><a href="/api/javascript/ui/datepicker">DatePicker JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI DateTimePicker:</p>

<ul>
<li><a href="/controls/editors/datetimepicker/overview">Overview of the DateTimePicker Widget</a></li>
<li><a href="/controls/editors/datetimepicker/how-to/prevent-invalid-values">How to Prevent Invalid Values</a></li>
<li><a href="/controls/editors/datetimepicker/how-to/custom-date-validation">How to Validate Custom Dates</a></li>
<li><a href="/controls/editors/datetimepicker/how-to/limit-datetimepicker-navigation-to-months">How to Limit Navigation to Months</a></li>
<li><a href="/controls/editors/datetimepicker/how-to/override-hours">How to Override Hours in the Popup</a></li>
<li><a href="/api/javascript/ui/datetimepicker">DateTimePicker JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI TimePicker:</p>

<ul>
<li><a href="/controls/editors/timepicker/overview">Overview of the TimePicker Widget</a></li>
<li><a href="/api/javascript/ui/timepicker">TimePicker JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

